<%--
  Created by IntelliJ IDEA.
  User: CrazyTobis
  Date: 2020-05-20
  Time: 16:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div>
    <div class="row">
        <div class="col-2 d-inline-block mr-5">
        <img  style="width: 200px;margin-left: 15px" src="${pageContext.request.contextPath}/static/img/${data.picture}" alt="这里是图片">
        </div>
        <div class="col ml-3">
        <div class=" alert alert-secondary p-2 d-inline-block mt-3  row" style="vertical-align: top" >
           <span style="margin-right: 200px"> 物品品名:${data.goodsName} </span>
            <span style="margin-right: 200px"> 物品ID:${data.id} </span>
            <span style="margin-right: 200px"> 计量单位:${data.unit} </span>
        </div>
           <div class="row">
               <div class="alert a text-center col-2 mr-5" role="alert" style="background-color: rgb(204,229,255)">
                  <div class="row offset-2"> 库存数量 </div>
                   <div class="row offset-2">${data.availableStock+data.breakNum}</div>
               </div>
               <div class="alert  text-center col-2 mr-5" role="alert"  style="background-color: rgb(204,229,255)">
                   <div class="row offset-2"> 可用数量 </div>
                   <div class="row offset-2">${data.availableStock}</div>
               </div>
               <div class="alert  text-center col-2 mr-5" role="alert"  style="background-color: rgb(204,229,255)">
                   <div class="row offset-2"> 破损数量 </div>
                   <div class="row offset-2">${data.breakNum}</div>
               </div>
           </div>
        </div>

    </div>

    <div style="
    margin-top: 40px;
    left: -5px;
    width: 159px;
    height: 30px;
    background: #e2f3ff;
    border-radius: 0 17px 17px 0;
    color: #2397f3;
    text-align: center;
    line-height: 30px;">

      货架明细
    </div>

        <div data-tcj="last-table"></div>
</div>

<script>
    (function () {
        //获取点击的商品id
        let id = ${jsonData}.id;
        //ajax请求得到该商品的所有的库存详细
      $.post('lastDetail',{"id":id},function (e) {
          let cloumns = [{field: "color", title: "颜色"},
              {field: "size", title: "尺寸"},
              {field: "warehouse", title: "所属仓库"},
              {field: "shelves", title: "所属货架"},
              {field: "total", title: "数量"},
              {field: "completeAmount", title: "完好数"},
              {field: "brokenAmount", title: "破损数"}
          ];
          let options = {
              node : '[data-tcj="last-table"]',
              columns:cloumns,
              pageVO :e.data,
              isEdit:false,
              isChecked:false
          }
          firstTable(options);
      },"json")



    })();
</script>